require(['./config'], () => {
    require(['template', 'header', 'footer'], (template,header) => {

        class Car {
            constructor() {
                this.getData();
                this.deleteOne();
                this.add();
                this.reduce();
                this.checkAllClick();
                this.checkOneClick();
                this.deleteChecked();
            }

            car() {
                let car = localStorage.getItem('car');
                car = JSON.parse(car);
                return car;
            }

            // 获取数据
            getData() {
                const car = this.car();
                if (car) {
                    $('#nothing').css('display', 'none');
                    $('#dataTable').css('display', 'block');
                    $('#compute').css('display', 'flex');
                    $('#car-tbody').html(template('carTemplate', {car}));
                } else {
                    $('#nothing').css('display', 'flex');
                    $('#dataTable').css('display', 'none');
                    $('#compute').css('display', 'none');
                }
                this.checkAllStatus();
                this.getTotalMoney();
                this.getTotalNum();
            }

            //计算总价
            getTotalMoney() {
                let car = this.car();
                const totalMoney = car.reduce((money, ele) => {
                    if (ele.check) {
                        money += ele.price * ele.count
                    }
                    return money;
                }, 0).toFixed(2);
                $('#totalMoney').html(totalMoney);
            }

            //计算总数
            getTotalNum(){
                let car = localStorage.getItem('car');
                let count = 0;
                if (car) {
                    car = JSON.parse(car);
                    car=car.filter((ele)=>{
                        return ele.check
                    })
                    count = car.reduce((num, shop) => {
                        return num + shop.count
                    }, 0)
                }

                $('#totalNum').html(count);
            }

            //全选按钮状态
            checkAllStatus() {
                const car = this.car();
                const status = car.every((ele) => {
                    return ele.check
                });
                $('#checkAll').prop('checked', status);
            };

            //全选按钮点击
            checkAllClick() {
                let that = this;
                $('#checkAll').change(function () {
                    let flag = $(this).prop("checked");
                    const car = that.car();
                    $.each(car, (i, ele) => {
                        ele.check = flag;
                    });
                    localStorage.setItem('car', JSON.stringify(car));
                    that.getData();
                });
            }

            //单选按钮点击
            checkOneClick() {
                let that = this;
                $('#car-tbody').on('click', '#checkOne', function () {
                    let car = that.car();
                    const flag = $(this).prop("checked");
                    const id = $(this).parents('tr').attr('data-id');
                    car = car.map((ele => {
                        if (ele.id == id) {
                            ele.check = flag;
                        }
                        return ele;
                    }));
                    localStorage.setItem('car', JSON.stringify(car));
                    that.getData();
                })
            }


            //删除一个商品
            deleteOne() {
                let that = this;
                const car = this.car();
                $('#car-tbody').on('click', '#delOne', function () {
                    const id = $(this).parents('tr').attr('data-id');
                    const index = car.findIndex((ele) => {
                        return ele.id == id;
                    });
                    car.splice(index, 1);
                    if (car.length == 0) {
                        localStorage.removeItem('car');
                    } else {
                        localStorage.setItem('car', JSON.stringify(car));
                    }
                    that.getData();
                });

            }

            //删除选中
            deleteChecked() {
                $('#deleteChecked').on('click', () => {
                    let car = this.car();
                    car=car.filter(ele=>{
                        return ele.check==false
                    });
                    localStorage.setItem('car', JSON.stringify(car));
                    if (car.length == 0) {
                        localStorage.removeItem('car');
                    }
                    this.getData();
                })
            }

            //添加商品数量
            add() {
                let that = this;
                $('#car-tbody').on('click', '#add-btn', function () {
                    const id = $(this).parents('tr').attr('data-id');
                    let car = that.car();
                    car = car.map((ele => {
                        if (ele.id == id) {
                            ele.count++
                        }
                        return ele;
                    }));
                    localStorage.setItem('car', JSON.stringify(car));
                    that.getData();
                })
            }

            //减少商品数量
            reduce() {
                let that = this;
                $('#car-tbody').on('click', '#reduce-btn', function () {
                    const id = $(this).parents('tr').attr('data-id');
                    let car = that.car();
                    car = car.map((ele => {
                        if (ele.id == id) {
                            ele.count--
                            if (ele.count <= 1) {
                                ele.count = 1
                            }
                        }
                        return ele;
                    }));
                    localStorage.setItem('car', JSON.stringify(car));
                    that.getData();
                })
            }

        };
        new Car();
    })
})



